<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="demo">
            你爱好的运动是？<input type="checkbox" v-model='checkedAll'>全选/全不选
        
            <br>
            <input type="checkbox" v-model='selectValue[0]' name="items" :value="ball[0]">足球
            <input type="checkbox" v-model='selectValue[1]' name="items" :value="ball[1]">篮球
            <input type="checkbox" v-model='selectValue[2]' name="items" :value="ball[2]">羽毛球
            <input type="checkbox" v-model='selectValue[3]' name="items" :value="ball[3]">乒乓球
            <br>
            <input type="button" @click='All' value="全　选">
            <input type="button" @click='noAll' value="全不选">
            <input type="button" @click='revers' value="反　选">
            <input type="button" @click='submit' value="提　交">
        </form>
    </div>
    <script>
        Vue.config.productionTip = false;

        new Vue({
            el:'#demo',
            data:{
                selectValue:[false,false,false,false],
                ball:['足球','篮球','羽毛球','乒乓球']
            },
            methods: {
                //提交按钮
                submit(){
                    this.selectValue.map((item,index) => {
                        if(item){
                            alert(`${this.ball[index]}`)
                        } 
                        
                    })
                },
                //全选按钮
                All(){
                    this.selectValue = this.selectValue.map(item => {
                        return true
                    })
                },
                //全不选按钮
                noAll(){
                    this.selectValue = this.selectValue.map(item => {
                        return false
                    })
                },
                //反选按钮
                revers(){
                    this.selectValue = this.selectValue.map(item => {
                        return !item
                    })
                }
            },
            computed:{
                checkedAll:{
                    get(){
                        let arr = [];
                        let x = this.selectValue.filter((item,index) => {
                            if(item){
                                arr.push(item)
                                return arr
                            } 
                        })

                        if(x.length === 4){
                            return true
                        }else{
                            return false
                        }
                    },
                    set(val){
                        console.log("###",val)
                        this.selectValue=this.selectValue.map(item => {
                            return val
                        })
                    }
                }
                
            }
        })
    </script>
</body>

</html>